<template lang="html">
  <div class="list2">
    <!-- 搜索框 -->
    <search class="search"></search>
    <ul class="table2">
      <li v-for="(modules,all) in modules" v-if="all<1"><router-link to="/mudi/item" :class="{ 'router-link-active': isshow}">{{modules.title}}</router-link></li>
      <li v-else>
        <router-link :to='"/mudi/" + all'>{{modules.title}}</router-link>
      </li>
      <li class="lia2"><a href="javascript:void(0)"></a></li>
    </ul>
    <div class="listUrl2">
      <router-view></router-view>
    </div>
  </div>

</template>

<script>
import Vue from 'vue'
import search from "../components/search_shou1"
export default {
  components:{
    search
  },
  data(){
    return{
      arr:{},
      modules:{},
      bol:false,
      isshow:true
    }
  },
  created(){
    this.axios.get('http://txspring.cn:8080/getMu').then(data=>{
      let modules = data.data.data.modules;
      this.modules = modules;
    })
  },
  watch:{
    '$route'(){
      this.isshow = false;
    }
  }
}
</script>

<style lang="css">
  .list2{
    display: flex;
    background: #f5f5f5;
  }
  .search{
    background: #00b0ec;
  }
  .table2{
    width: 18%;
    /*height: 100%;*/
    background: #fff;
    position: fixed;
    top: 8%;
  }
  .table2 li{
    background: #f5f5f5;
    text-align: center;
    line-height: 3.6rem;
  }
  .table2 a{
    background: #fff;
    text-decoration: none;
    font-size: 1.6rem;
    display: block;
    width: 100%;
    border-bottom: 0.01rem solid #f5f5f5;
    border-left: 0.01rem solid #f5f5f5;
    /*padding: 1rem 0.5rem;*/
  }
  .table2 .router-link-active{
    font-size: 1.6rem;
    color: orange;
    border-left: 0.01rem solid orange;
    background: #f5f5f5;
  }
  .listUrl2{
    width: 100%;
    margin-top: 17%;
    margin-left: 18.6%;
    /*background: red;*/
  }
  .lia2 a{
    height: 19rem;
    border: none;
  }
</style>
